<!-- <script src='../js/jquery.js'></script> -->
<!-- 1.渲染页面顶部的帖子分类信息 -->
<a id="homeList" href="/">首页</a>
<button id="toggleList">话题列表 <i class="layui-icon layui-icon-down layui-font-12"></i> </button>
<div id="listContainer" class="layui-menu layui-dropdown-menu">
    <!-- <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"></li> -->
    <th:block th:unless="${null == bbsPostCategories}">
        <th:block th:each="c : ${bbsPostCategories}">
            <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                <a th:href="@{${'/index?categoryId='+c.categoryId}}" th:text="${c.categoryName}">分享</a>
            </li>
        </th:block>
    </th:block>
    <!-- <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li> -->
</div>
<script>
    // 我的jquery代码
    $(function () {
        $("#header-container").load("html/header.html");
        $("#topicGroup-container").load("html/topicGroup.html");
        $("#footer-container").load("html/footer.html");

        // 控制列表展开
        $('#toggleList').click(function () {
            $('#listContainer').toggleClass('show');
        });
    });
</script>
<style>
    #homeList,
    #toggleList {
        display: inline-block;
        vertical-align: middle;
        height: 38px;
        line-height: 38px;
        border: 1px solid transparent;
        padding: 0 18px;
        background-color: #16baaa;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
    }

    #toggleList {
        margin-left: 10px;
        border-color: #d2d2d2 !important;
        background: #fff !important;
        color: #333;
    }

    #listContainer {
        position: absolute;
        z-index: 1;
        display: none;
        /* 默认隐藏列表 */
        /* 其他样式 */
        border-width: 1px;
        border-style: solid;
        border-color: #eee;
        left: 80px;
        top: 40px;
    }

    #listContainer li {}

    #listContainer.show {
        display: block;
        /* 显示列表 */
    }
</style>